<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="commons/css::css">head</th:block>
</head>

<body class="flat-blue">
<div class="app-container">
    <div class="row content-container">
        <th:block th:include="commons/nav_head::nav">head</th:block>
        <th:block th:include="commons/side::side">side</th:block>

        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                查询条件
                            </div>
                            <div class="panel-body form-group" style="margin-bottom:0px;">
                                <form>
                                    <label class="col-sm-2 control-label" for="searchAlias"
                                           style="text-align: right; margin-top:5px">昵称（商户名称）：</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control input-sm" id="searchAlias" name="searchAlias"/>
                                    </div>
                                    <label class="col-sm-2 control-label" for="searchAuditStatus"
                                           style="text-align: right; margin-top:5px">审核状态</label>
                                    <div class="col-sm-2">
                                        <select class="selected selectpicker" id="searchAuditStatus" name="searchAuditStatus">
                                            <option value="">请选择</option>
                                            <option value="1">待审核</option>
                                            <option value="2">审核通过</option>
                                            <option value="3">审核不通过</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2 col-sm-offset-1">
                                        <a href="javascript:void (0)" onclick="initTable()" class="btn btn-info btn-sm"><span
                                                class="fa fa-search"></span> 搜索</a>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <table id="dataTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<th:block th:include="commons/js::js">Javascript Libs</th:block>
<script type="text/javascript">

    $(function () {
        var aduitStatus = {"1": "待审核", "2":"审核通过", "3":"审核不通过"};

        $("#dataTable").bootstrapTable({
            url: ctx + "/customer/getAllCustomListPage", // 获取表格数据的url
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [10, 20, 30, 50], // 设置页面可以显示的数据条数
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码
            sidePagination: 'server', // 设置为服务器端分页
            // toolbar: '#toolbar', // 工具按钮用哪个容器
            // showRefresh: true,
            silent: true,
            uniqueId: "id",
            undefinedText: "-",
            contentType: "application/x-www-form-urlencoded",
            method: "post",
            queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    pageSize: params.limit, // 每页要显示的数据条数
                    offset: params.pageNumber, // 每页显示数据的开始行号
                    sort: params.sort, // 要排序的字段
                    sortOrder: params.order, // 排序规则
                    auditStatus: $("#searchAuditStatus").val(),
                    alias: $("#searchAlias").val()
                }
            },
            sortName: 'id', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            columns: [
                 {
                    field: 'account', // 返回json数据中的name
                    title: '账号', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                },
                {
                    field: 'type', // 返回json数据中的name
                    title: '账号类型', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (!value) {
                            return "-";
                        }
                        if (value == 1) {
                            return "个人用户";
                        } else if (value == 2) {
                            return "商户";
                        }
                        return "-";
                    }
                },
                {
                    field: 'auditStatus', // 返回json数据中的name
                    title: '状态', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    sortable: true,
                    sortName: "audit_status",
                    formatter: function (value, row, index) {
                        var type = row["type"];
                        if (type == 2 && value) {
                            return aduitStatus[value.toString()];
                        }
                        return "-";
                    }
                },{
                    field: 'alias', // 返回json数据中的name
                    title: '昵称（商户名称）', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                },{
                    field: 'headImg', // 返回json数据中的name
                    title: '图像（商标）', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    formatter: function (value, row, index) {
                        if (value) {
                            return "<img src='"+value+"' style='width: 35px; height: 35px;'>";
                        }
                        return value;
                    }
                },{
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        var sb = new StringBuilder();
                        var type = row["type"];
                        var auditStatus = row["auditStatus"];
                        if (type == 1 || auditStatus != 1) {
                            sb.append('<button title="查看" class="btn btn-sm btn-info" onclick="viewCustomer(' + row.id + ')"><span class="glyphicon glyphicon-eye-open"></span></button>&nbsp;&nbsp;');
                        } else if (type == 2 && auditStatus == 1) {
                            sb.append('<button title="审核" class="btn btn-sm btn-info" onclick="viewCustomer(' + row.id + ')"><span class="glyphicon glyphicon-edit"></span></button>&nbsp;&nbsp;');
                        }
                        return sb.toString();
                    }
                }
            ],
            responseHandler: function (res) {
                return {
                    "rows": res.data.rows, // 具体每一个bean的列表
                    "total": res.data.total // 总共有多少条返回数据
                }
            }
        });
    });

    function initTable() {
        $("#dataTable").bootstrapTable("refresh");
    }

    function viewCustomer(id) {
        document.location.replace(ctx + "/customer/info_customer/" + id);
    }
</script>
</html>